<template>
	<view>
		<uni-swipe-action v-for="(item,index) in conversationList" :key="item.id">
			<uni-swipe-action-item :right-options="options" :show="item.isopen" :ispinned="item" @change="change($event,item)" @click="bindClick($event,item)">
				<view  @click="clickItem(item)"
					class="flex-ju-b height122">
					<view class="flex-a-i">
						<image class="image wh81-81 ra81 mr20" src="/static/aaa.png"></image>
						<view>
							<view>{{item.title}}</view>
							<view class="size26 color999 mt5">{{item.note}}</view>
						</view>
					</view>
					<view>
						<view class="color999 size26">
							<time-day :conversation="item"></time-day>
						</view>
						<view v-if="item.unread_count" class="size26 mt5  flex-row">
							<view class="badge center">
								{{item.unread_count}}
							</view>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	const db = uniCloud.database();
	export default {
		name:"uni-im-conversation-list",
		data() {
			return {
				keyword:"",
				options: [{
						text: '聊天置顶',
						style: {
							backgroundColor: '#FF8A4C'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#FF3B30'
						}
					}
				],
			};
		},
		 created() {
			
		},
		computed: {
			conversationList() {
				var datalist = uniIm.conversation.dataList
				datalist.map(item=>{
					item.isopen = 'none'
				})
				
				return datalist
					// #ifdef H5
						.filter(i => i.title.toLowerCase().includes(this.keyword.toLowerCase()))
					// #endif
					.filter(i => !i.hidden)
			}
		},
		watch: {
			// conversationList: {
			// 	handler() {
			// 		// this.conversationList = []
					
			// 		// console.log('更新会话列表', this.conversationList)
			// 		// this.$emit('change', this.conversationList)
			// 	},
			// 	deep: true
			// },
			// activeConversationId(activeConversationId) {
			// 	// #ifdef H5
			// 	// 重试次数
			// 	let tryIndex = 0
			// 	const scrollToCurrentConversation = () => {
			// 		if (tryIndex > 5) {
			// 			return
			// 		}
			// 		const query = uni.createSelectorQuery().in(this);
			// 		query.select('#' + activeConversationId).boundingClientRect(data => {
			// 			if (!data) {
			// 				// console.log('找不到 showMsgByIndex #'+activeConversationId,'tryIndex:'+tryIndex);
			// 				tryIndex++
			// 				setTimeout(() => scrollToCurrentConversation(), 300)
			// 				return
			// 			} else {
			// 				// console.log(data);
			// 			}
			// 			let listHeight = document.querySelector('.conversation-list')?.clientHeight
			// 			if (data.top - 70 < listHeight) {
			// 				return
			// 			}
			// 			this.listScrollTop = ''
			// 			this.$nextTick(() => {
			// 				this.listScrollTop = currentScrollTop - listHeight + data.top + data.height
			// 				// console.log('this.listScrollTop',this.listScrollTop);
			// 			})
			// 		}).exec()
			// 	}
			// 	scrollToCurrentConversation()
			// 	// #endif
			// }
		},
		
		methods:{
			change(e,item){
				if(e == 'right'){
					item.isopen = e
				}
			},
			bindClick(e,item){
				console.log(item)
				if(e.index==1){
					item.hide()
				}else{
					item.pinned = !item.pinned
					item.isopen = 'none'
					db.collection('uni-im-conversation')
						.doc(item._id)
						.update({
							"pinned": item.pinned
						})
						.then((e) => {
							
						})
						.catch(() => {
							uni.showToast({
								title: '服务端错误，置顶失败，请稍后重试',
								icon: 'none'
							});
							titem.pinned = !item.pinned
						})
				}
			},
			clickItem(item){
				console.log(item,"kkk")
				this.$emit('clickItem', item)
			},
			async loadMore() {
			  let data = await uniIm.conversation.loadMore()
			  // console.log('加载到新的会话数据',data);
			  return data
			},
		}
	}
</script>

<style>
.badge{
	transform: scale(0.9);
	color: #fff;
	background-color: #f00;
	border-radius: 10px;
	min-width: 16px;
	min-height: 16px;
	padding: 0 1px;
}
</style>